<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />
    <!-- /子路由出口 -->

    <!-- 标签导航栏 -->
    <!--
      route: 开启路由模式
     -->

    <!-- /标签导航栏 -->
    <van-tabbar class="layout-tabbar" route>
      <van-tabbar-item to="/" icon-prefix="icon" icon="shouye"
        >首页</van-tabbar-item
      >
      <van-tabbar-item to="/qa" icon-prefix="icon" icon="wenda"
        >问答</van-tabbar-item
      >
      <van-tabbar-item to="/video" icon-prefix="icon" icon="shipin"
        >视频</van-tabbar-item
      >
      <van-tabbar-item to="/user" icon-prefix="icon" icon="wode">{{
        $store.state.user ? "我的" : "未登录"
      }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "LayoutIndex",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="less">
.layout-container {
  /deep/ .layout-tabbar {
    i.icon {
      font-size: 40px;
    }
    span.text {
      font-size: 20px;
    }
  }
}
</style>
